
// react
import React, { useEffect } from "react";
// lib
import { Modal, Form, Input } from "antd";
// components & widget
// import FormItemUploader from "components/Form/FormItemUploader";
// style
import { MODAL_STYLE } from "project/config";
// config
import { INPUT_REQUIRED_RULE, NAME_LENGTH_RULE } from "project/validRules";
// script & methods & public
// store
import { observer } from "mobx-react";
import { state } from "./state";
import { userState } from "state/global";
// controller
import { letUserInfoUpdate } from "./controller";
import { REQUIRED_RULE, verifyMobile } from "utils/validator";
import { getUriArrFromUoloadFile } from "biz/File/logic";
// interface
// 其它

function InfoModal() {
  const [form] = Form.useForm();

  const title = "修改用户信息";
  const show = state.infoModal;

  const account = userState.getAccount();

  useEffect(() => {
    if (show) {
      form.setFieldsValue({
        ...account,
      });
    }
  }, [account, form, show]);

  const handleCancel = () => {
    state.infoModal = false;
  };

  const handleOk = async () => {
    try {
      const result = await form.validateFields();
      const avatar = getUriArrFromUoloadFile(result.avatar)[0];
      letUserInfoUpdate({ ...result, avatar });
    } catch (error) {
      //
    }
  };

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      okButtonProps={{
        loading: state.infoLoading,
      }}
    >
      <Form name="InfoModalForm" {...MODAL_STYLE.FORM_6_15} form={form}>
        <Form.Item
          name="userName"
          label="用户昵称"
          rules={[REQUIRED_RULE("请填写用户昵称"), NAME_LENGTH_RULE]}
        >
          <Input
            placeholder={`请填写用户昵称, ${NAME_LENGTH_RULE.message}`}
            maxLength={NAME_LENGTH_RULE.max}
            allowClear
          />
        </Form.Item>
        <Form.Item
          name="mobile"
          label="电话"
          rules={[
            INPUT_REQUIRED_RULE,
            { validator: (rule, val) => verifyMobile(rule, val) },
          ]}
        >
          <Input />
        </Form.Item>
        {/* <FormItemUploader
          name="avatar"
          label="照片"
          required={false}
          defaultValue={account.avatar || ""}
        /> */}
      </Form>
    </Modal>
  );
}

export default observer(InfoModal);
